<template>
  <div style="height: 100%">
    <el-row style="height: 100%">
      <!-- 菜单 -->
      <el-col :span="2" style="height: 100%; width: 100%">
        <el-menu
          style="height: 100%"
          router
          class="el-menu-vertical-demo"
          :default-active="defaultActive"
          @open="handleOpen"
          @close="handleClose"
        >
          <MenuTree :menuData="menuList" :btnMent="btnMent"></MenuTree>

          <!-- 
          <template v-for="menu in menuList">
            
            <el-sub-menu
              v-if="menu.children && menu.children.length > 0"
              :index="menu.path"
              :key="menu.id"
            >
              <template #title>
                <el-icon><component :is="menu.icon"></component> </el-icon>
                <span>{{ menu.name }}</span>
              </template>

              <el-menu-item-group>
                <el-menu-item
                  :class="menuItem.active > 0 ? 'is-active' : ''"
                  v-for="menuItem in menu.children"
                  :key="menuItem.id"
                  @click="btnMent(menuItem)"
                >
                  <el-icon
                    ><component :is="menuItem.icon"></component>
                  </el-icon>
                  {{ menuItem.name }}</el-menu-item
                >
              </el-menu-item-group>
            </el-sub-menu>

            <el-menu-item
              v-else
              :class="menu.active > 0 ? 'is-active' : ''"
              :index="menu.path"
              :key="menu.id"
              @click="btnMent(menu)"
            >
              <el-icon> <component :is="menu.icon"></component> </el-icon>
              <span>{{ menu.name }}</span>
            </el-menu-item>
          </template>-->

          <!-- <el-menu-item index="home" @click="checkTag('home')">
            <el-icon><House /></el-icon>
            <span>首页</span>
          </el-menu-item>

          <el-sub-menu index="setting">
            <template #title>
              <el-icon><Setting /></el-icon>
              <span>设置</span>
            </template>

            <el-menu-item-group>
              <el-menu-item
                index="user"
                class="el-sub-menu is-active is-opened"
              >
                <el-icon><User /></el-icon>
                用户管理</el-menu-item
              >
              <el-menu-item index="role"
                ><el-icon><Avatar /></el-icon>角色管理</el-menu-item
              >
            </el-menu-item-group>
          </el-sub-menu> -->
        </el-menu>
      </el-col>
      <!-- 菜单 -->

      <el-col :span="22">
        <div style="height: 20px; margin-top: 15px; margin-left: 15px">
          <el-row>
            <el-col :span="22">
              <el-breadcrumb :separator-icon="ArrowRight">
                <!-- 最末尾的级别span 不给跳转,其他的router-link可以跳转-->
                <el-breadcrumb-item
                  v-for="(item, index) in routeList"
                  :key="item.name"
                >
                  <span v-if="index == routeList.length - 1">{{
                    item.name
                  }}</span>
                  <router-link v-else :to="item.path">{{
                    item.name
                  }}</router-link>
                </el-breadcrumb-item>
              </el-breadcrumb>
            </el-col>

            <el-col :span="2" style="text-align: center; margin-top: -10px">
              <el-link :underline="false" style="margin: 8px">
                <el-avatar
                  style="margin-top: -8px"
                  class="mr-3"
                  :size="32"
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              /></el-link>
              <el-link :underline="false" @click="exit()"> 退出 </el-link>
            </el-col>
          </el-row>
        </div>

        <!-- 上 右 下 左 -->
        <el-divider style="margin: 3px 0px 0px 0px" />
        <div style="width: 100%; height: 30px; line-height: 28px">
          <div style="height: 100%; margin-left: 5px">
            <el-tag
              v-for="tag in dynamicTags"
              :key="tag.name"
              :type="tag.type"
              class="mx-1"
              :closable="true"
              style="margin-right: 5px"
              :disable-transitions="false"
              @click="btnTag(tag)"
              @close="handleCloseTag(tag)"
            >
              {{ tag.name }}
            </el-tag>
          </div>
          <!-- 上 右 下 左 -->
          <el-divider style="margin: 3px 0px 3px 0px" />

          <router-view v-slot="{ Component }">
            <keep-alive>
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script  setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  ArrowRight,
} from "@element-plus/icons-vue";

import { ElMessage } from "element-plus";
import { reactive, ref, onMounted, inject, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import MenuTree from "@/components/MenuTree.vue";
import * as menuApi from "@/api/menuApi";

import { useCounterStore } from "@/stores/counter";
const store = useCounterStore();

const router = useRouter();

const route = useRoute();

const defaultActive = ref("");

console.info(route);

const routeList = computed(() => {
  return route.matched;
});

const menuList = ref();

const menuList1 = reactive([
  {
    id: "1",
    icon: "HomeFilled",
    name: "首页",
    path: "home",
    fullPath: "navigation/home",
    active: "1",
  },

  {
    id: "20",
    icon: "Position",
    name: "位置管理",
    path: "position",
    fullPath: "navigation/position",
    active: "0",
  },
  {
    id: "30",
    icon: "Operation",
    name: "监测设备管理",
    path: "device",
    fullPath: "navigation/device",
    active: "0",
  },

  {
    id: "50",
    icon: "user",
    name: "我的信息",
    path: "myInfo",
    fullPath: "navigation/myInfo",
    active: "0",
  },

  {
    id: "2",
    icon: "Tools",
    name: "设置",
    path: "setting",
    fullPath: "",
    active: "0",
    children: [
      {
        id: "3",
        icon: "User",
        name: "用户管理",
        path: "user",
        fullPath: "navigation/user",
        active: "0",
      },
      {
        id: "4",
        icon: "Avatar",
        name: "角色管理",
        path: "role",
        fullPath: "navigation/role",
        active: "0",
      },
      {
        id: "5",
        icon: "Menu",
        name: "菜单管理",
        path: "menu",
        fullPath: "navigation/menu",
        active: "0",
      },
    ],
  },
  {
    id: "100",
    icon: "Management",
    name: "异常处理",
    path: "management",
    fullPath: "",
    active: "0",
  },
  {
    id: "200",
    icon: "List",
    name: "异常查询",
    path: "List",
    fullPath: "",
    active: "0",
  },
]);

const dynamicTags = ref([]);

const handleCloseTag = (tag) => {
  const index = dynamicTags.value.indexOf(tag);
  dynamicTags.value.splice(index, 1);

  if (tag.path == defaultActive.value && dynamicTags.value.length > 0) {
    const tagMenu = dynamicTags.value[index - 1];
    tagMenu.type = "";
    router.push(tagMenu.path);
    defaultActive.value = tagMenu.path;
  }
};

function checkTag(tag) {
  dynamicTags.value.forEach((v) => {
    v.type = "info";
  });

  const urlList = dynamicTags.value.filter((m) => m.path === tag.path);

  if (urlList.length > 0) {
    const urlVar = urlList[0];
    urlVar.type = "";
  } else {
    const tagMenu = { path: tag.path, type: "", name: tag.name };
    dynamicTags.value.push(tagMenu);
  }

  defaultActive.value = tag.path;
}

function btnMent(item) {
  checkTag(item);
}

function btnTag(tag) {
  router.push(tag.path);
  checkTag(tag);
}

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};

const handleClose = (key, keyPath) => {
  //console.log(key, keyPath);
};

function exit() {
  router.push("/");
}

onMounted(() => {
  //动态调整左侧菜单栏高度
  //var docHeight = document.documentElement.clientHeight;
  //console.log("url==" + router.currentRoute.value.fullPath);

  menuApi.tree({ roleId: store.uType }).then((response) => {
    if (response.data.code == 200) {
      menuList.value = response.data.data;
      router.push("/home");
      defaultActive.value = "home";
      const tagMenu = { path: "home", name: "首页", type: "" };
      dynamicTags.value.push(tagMenu);
    }else{
      ElMessage("获取权限失败")
    }
  });
});
</script>
